<template>
  <div>
    <van-nav-bar title="客户管理" left-text="返回" fixed left-arrow @click-left="leftClick" />
    <div class="list-content">
      <van-search v-model="value" placeholder="根据收货人进行搜索" show-action shape="round" @search="onSearch">
        <div slot="action" @click="onSearch">搜索</div>
      </van-search>
      <van-pull-refresh v-model="refreshLoading" @refresh="onRefresh">
        <van-list v-model="listLoading" :finished="finished" @load="onLoad" finished-text="没有更多了">
          <div class="customer__item" v-for="item in list" @click="goDetail(item)">
            <div class="customer__img">
              <img :src="item.icon" width="60px">
            </div>
            <div class="customer__info">
              <div class="customer__info__user">
                <div>{{item.nickname}}</div>
                <div class="customer__info__user__phone">{{item.addressPhone}}</div>
              </div>
              <!-- <div class="customer__el">{{item.nickname}}</div> -->
              <div class="customer__info__total">
                <div>
                  <van-button plain type="primary" size="mini">详情</van-button>
                </div>
                <div>
                  <span class="text">总计：</span>{{item.total}}元
                </div>
              </div>
            </div>
          </div>
        </van-list>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
  import {
    CUSTOMER_LIST
  } from '@/api/user'
  import {
    mapState
  } from 'vuex'
  export default {
    data() {
      return {
        value: '',
        currPage: 0,
        pageSize: 10,
        refreshLoading: false,
        listLoading: false,
        finished: false,
        list: []
      }
    },
    computed: {
      ...mapState(['stationInfo'])
    },
    mounted() {
    },
    methods: {
      leftClick() {
        this.$router.go(-1);
      },
      getList() {
        this.$reqPost(CUSTOMER_LIST, {
          stationId: this.stationInfo.id,
          page: this.currPage,
          rows: this.pageSize,
          addressName: this.value,
          payStatus: 0
        }).then(res => {
          this.refreshLoading = false;
          this.listLoading = false;
          if(this.list.length == res.total){
            this.finished = true;
          }
          this.list.push(...res.rows);
        })
      },
      onRefresh() {
        this.list = [];
        this.currPage = 1;
        this.finished = false;
        this.refreshLoading = true;
        this.listLoading = true;
        this.getList();
      },
      onLoad() {
        this.currPage++;
        this.getList();
      },
      goDetail(item){
        this.$router.push({
          path: '/singleCustomerOrderList',
          query: {
            openid: item.openid
          }
        })
      },
      onSearch(){
        this.list = [];
        this.currPage = 1;
        this.finished = false;
        this.refreshLoading = true;
        this.listLoading = true;
        this.getList();
      }
    }
  }

</script>

<style lang="less" scoped>
  @import '../../styles/variable.less';

  .customer__item {
    display: flex;
    background: #ffffff;
    padding: 10px;
    border-bottom: 1px solid @col-bb;
    // justify-content: space-between;
    margin: 10px;
    border-radius: 5px;
    .customer__info{
      display: flex;
      flex: 1;
      margin-left: 10px;
      .customer__info__user{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        flex: 1;
        .customer__info__user__phone{
          color: #999;
          font-size: 14px;
        }
      }
      .customer__info__total{
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: flex-end;
        color: @col-the;
        .text{
          font-size: 12px;
          color: #333;
        }
      }
    }
  }

</style>
